<template>
  <div class="title-view">
    <div class="back-view" @click="navBack">
      <i class="el-icon-arrow-left back-icon"></i>
    </div>
    <div>{{ titleName }}</div>
  </div>
</template>

<script>
export default {
  name: "title-view",
  computed: {
    titleName() {
      return this.$route.meta.title
    }
  },
  methods: {
    navBack() {
      // console.log(this.$router)
      if (window.history.length <= 1) this.$router.push('/')
      else this.$router.back()
    },
  }
}
</script>

<style scoped>
.title-view {
  position: relative;
  width: 100%;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  background: #eaeaea;
  font-size: 1.5rem;
  font-weight: bold;
}

.back-view {
  position: absolute;
  width: 5rem;
  height: 5rem;
}

.back-icon {
  font-size: 2rem;
}

.back-view:hover {
  background: #b7a7a7;
}
</style>
